<template>
  <div v-loading="pageLoading" :class="{'mobile-detail-wrap':showMobilePage}" class="customer-bill-detail-wrap">
    <Title title="账单信息" style="margin-bottom: 12px;" />
    <el-form
      ref="customerBillForm"
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage ? 'left' : 'right'"
      class="lineHeight32 customer-form"
      label-width="90px">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="labelSpan">
          <el-form-item label="账单月份:">
            <ToolTip :content="format(detailData.billMonth, 'YYYY/MM')" />
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="客户名称:">
            <ToolTip :content="detailData.customerName" />
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="逾期天数:">
            <ToolTip v-if="detailData.overdueDayNum > 0" :content="`${detailData.overdueDayNum}天`" style="color: red;" />
            <span v-else>无逾期</span>
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="更新时间:">
            <ToolTip :content="format(detailData.updateTime, 'YYYY/MM/DD HH:mm')" />
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="更新人:">
            <CheckUserInfo v-if="detailData.updater" :label="detailData.updater" :user-id="detailData.updaterId" />
            <div v-else-if="detailData.updaterId === 0">系统更新</div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="创建时间:">
            <ToolTip :content="format(detailData.createTime, 'YYYY/MM/DD HH:mm')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <Title title="订单明细" style="margin-bottom: 16px;" />
    <dataDisplay v-if="statistics" :data-list="dataList" style="margin-bottom: 20px;" />
    <div v-if="!showMobilePage" class="tool-row">
      <FilterInput
        ref="FilterToolRef"
        v-model="paramsObj"
        :filter-list="filterList"
        show-search-btn
        is-search-resource
        is-show-config
        @selectChange="handelFilterInputChange"
        @handelClick="queryClick"
        @queryEmpty="queryEmpty"
        @filterTagStatus="filterTagStatus">
        <template slot="valueAppend">
          <el-checkbox v-model="paramsObj.exactForClientName" :true-label="1" :false-label="0" style="position: relative;">精准搜索</el-checkbox>
        </template>
      </FilterInput>
      <div class="opeator-bar">
        <el-button v-if="hasRouteAuth('crm:customerBill:update')" class="empty-btn-style" size="small" style="margin-right: 10px;border-color: #406EFF;color: #406EFF;" @click="handleUpdate">更新账单</el-button>
        <btnGroup
          v-if="hasRouteAuth('crm:customerBill:export')"
          ref="btnGroupRef"
          :list="[
            { label:'导出', auth: hasRouteAuth('crm:customerBill:export'), exportApi: '/admin/customerBill/export', exportName:'客户账单', beforeExport: openExportDialog, type: 'export' }
          ]"
          @beginExport="exportDialogClose"
        />
      </div>
    </div>
    <FilterInput
      v-if="showMobilePage"
      ref="FilterToolRef"
      v-model="paramsObj"
      :filter-list="filterList"
      line-feed
      show-search-btn
      is-search-resource
      @selectChange="handelFilterInputChange"
      @handelClick="queryClick"
      @queryEmpty="queryEmpty"
      @filterTagStatus="filterTagStatus">
      <template slot="valueAppend">
        <el-checkbox v-model="paramsObj.exactForClientName" :true-label="1" :false-label="0" style="position: relative;top: 4px;">精准搜索</el-checkbox>
      </template>
    </FilterInput>
    <div v-if="showMobilePage" class="flex" style="margin-top: 12px;">
      <el-button size="small" class="empty-btn-style" style="margin-right: 10px;border-color: #406EFF;color: #406EFF;" @click="handleUpdate">更新账单</el-button>
      <btnGroup
        v-if="hasRouteAuth('crm:customerBill:export')"
        ref="btnGroupRef"
        :list="[
          { label:'导出',auth: hasRouteAuth('crm:customerBill:export'), exportApi: '/admin/customerBill/export', exportName:'客户账单', beforeExport: openExportDialog, type: 'export' }
        ]"
        @beginExport="exportDialogClose"
      />
    </div>
    <div class="table-list">
      <div v-loading="listLoading" v-if="list.isInit" style="height: 300px" />
      <orderTable
        v-else
        ref="orderTableContainer"
        :list="list"
        :list-loading="listLoading"
        :order-list-setting="orderListSetting"
        :table-height="''"
        :show-actions-column="false"
        hide-selection
        is-blank
        @sortMethod="sortMethod"
        @fetchData="fetchOrderData"
        @handleSelectionChange="handleSelectionChange" />
      <el-row type="flex" justify="end" style="margin-top: 8px;">
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="showMobilePage ? pageLayout : 'total, prev, pager, next, sizes, jumper'"
          :small="showMobilePage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
      <fixed-pagination v-show="list.total > 0">
        <div class="center">
          <el-button type="info" size="small" class="back-btn cancel-btn-style" @click="toBack">返回</el-button>
        </div>
      </fixed-pagination>
    </div>
    <exportDialog ref="exportBillRef" :visible="exportBillVisible" :customer-bill-ids="id" :bill-month="detailData.billMonth" is-detail @close="closeExportDialog" @handleExport="handleExport" />
  </div>
</template>

<script>
// components
import Title from '@/components/Title';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import orderTable from '@/components/OrderList/orderTable';
import exportDialog from './components/exportDialog';
import btnGroup from '@/components/Common/baseComponent/btnGroup';
// api
import { getList } from '@/api/order';
import { getOperateoptions } from '@/api/resource';
import { getIncomeType, platformList, orderFormList, getNeedCategoryList } from '@/api/select';
import { costList, getDepartmentAll, getTagAll } from '@/api/config';
import { customerBillDetail, customerBillDetailStatistics, updateCustomerBill } from '@/api/customer';
// tools
import { mapState } from 'vuex';
import { format } from '@/filters/date';
import axios from 'axios';
import orderListSetting from './orderListSetting';
import { TAG_MODULES } from '@/utils/const';
import { showModal } from '@/utils/message';
import { hasRouteAuth } from '@/utils/permission';
import { paramsRangeFormat, paramsAryToStr } from '@/utils/paramsFormat';
import {
  orderOption, reviewStateOption, resourceOption,
  settlementStatusOption, costSettlementStatusOption
} from '@/views/order/model/selectData';
import { verificationOptions } from '@/views/project/model/selectData';
// imgs
import icon_16 from '@/assets/dataDisplay/icon_16.png';
import icon_17 from '@/assets/dataDisplay/icon_17.png';
import icon_20 from '@/assets/dataDisplay/icon_20.png';
import icon_21 from '@/assets/dataDisplay/icon_21.png';
import icon_22 from '@/assets/dataDisplay/icon_22.png';
// mixins
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';
import selectOption from '@/views/order/mixins/selectOption';

export default {
  components: { Title, dataDisplay, orderTable, exportDialog, btnGroup },
  mixins: [TableAdaptive, mobileTable, selectOption],
  data() {
    return {
      icon_16, icon_17, icon_20, icon_21, icon_22,
      TAG_MODULES,
      orderListSetting,
      pageLoading: false,
      exportBillVisible: false,
      detailData: {},
      statistics: {},
      listLoading: false,
      selectOrderList: [],
      paramsObj: {},
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0,
        isInit: true
      },
      page: 1,
      sortName: '',
      sortType: '',
      incomeOptions: [],
      deptTreeList: [],
      tagTreeList: [],
      needCategoryAry: [],
      orderFormOption: [],
      operateModeList: [],
      orderPlatformOption: [],
      supplierType: [{ label: '公司', value: 0 }, { label: '个人', value: 1 }],
      rangeKeyArr: [
        { attr: 'orderTime', start: 'orderStartTime', end: 'orderEndTime', type: 'time' },
        { attr: 'orderSealMonth', start: 'orderSealMonthStart', end: 'orderSealMonthEnd', type: 'time' },
        { attr: 'createTime', start: 'createStartTime', end: 'createEndTime', type: 'time' },
        { attr: 'arrivalTime', start: 'arrivalStartTime', end: 'arrivaltEndTime', type: 'time' },
        { attr: 'deleteTime', start: 'deleteStartTime', end: 'deleteEndTime', type: 'time' },
        { attr: 'taxAmount', start: 'taxAmountStart', end: 'taxAmountEnd', type: 'moneyFixed' }
      ],
      arrayKeyArr: ['tag', 'operateMode', 'resourceAttributionMatrixId', 'orderPlatformId', 'departmentId', 'cooperationDepartment', 'accountState']
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    labelSpan() {
      return this.showMobilePage ? 24 : 8;
    },
    dataList() {
      const statistics = this.statistics;
      return [
        { label: '含税金额', data: statistics['amount'], icon: icon_16 },
        { label: '已核销金额', data: statistics['writeOffAmount'], icon: icon_17 },
        { label: '欠款金额', data: statistics['owePrice'], icon: icon_20 },
        { label: '逾期欠款金额', data: statistics['overduePrice'], icon: icon_21 }
      ];
    },
    filterList() {
      const arr = [
        // 输入框
        { keyword: 'orderId', labelWidth: '96px', name: '订单编号', type: 'input' },
        { keyword: 'clientName', labelWidth: '96px', name: '客户名称', type: 'input', placeholder: '支持分号搜索多个', showAppend: true },
        { keyword: 'resourceName', labelWidth: '96px', name: '账号', type: 'input' },
        { keyword: 'orderOperator', labelWidth: '96px', name: '执行人', type: 'input', doubleClick: true, placeholder: '请输入，双击填充当前用户' },
        { keyword: 'accounts', name: '批量搜索账号', labelWidth: '96px', type: 'input',
          inputType: 'textarea', lengthLimit: false, placeholder: '可通过粘贴快速填写账号名称，每行代表一个账号名称' },
        { keyword: 'creator', labelWidth: '96px', name: '创建人', type: 'input', doubleClick: true, placeholder: '请输入，双击填充当前用户' },
        { keyword: 'market', labelWidth: '96px', name: '销售', type: 'input', doubleClick: true, placeholder: '请输入，双击填充当前用户' },
        { keyword: 'supplier', labelWidth: '96px', name: '供应商', type: 'input' },
        { keyword: 'contactPerson', labelWidth: '96px', name: '客户联系人', type: 'input' },
        { keyword: 'performanceMonth', labelWidth: '96px', name: '业绩月份', type: 'input' },
        { keyword: 'theme', labelWidth: '96px', name: '品牌名称', type: 'input' },
        { keyword: 'remark', labelWidth: '96px', name: '备注', type: 'input' },
        { keyword: 'resourceCode', labelWidth: '96px', name: '账号ID', type: 'input' },
        { keyword: 'systemId', labelWidth: '96px', name: '系统ID', type: 'input' },
        { keyword: 'cooperation', labelWidth: '96px', name: '合作运营方', type: 'input' },
        { keyword: 'accountOperationList', labelWidth: '96px', name: '运营人员', type: 'input', doubleClick: true, placeholder: '请输入，双击填充当前用户' },
        { keyword: 'taxAmount', labelWidth: '96px', name: '含税金额', type: 'inputRange' },
        // 下拉
        { keyword: 'orderPlatformId', name: '下单平台', type: 'mulSelect', options: this.orderPlatformOption },
        { keyword: 'orderFormId', name: '下单形式', type: 'select', emptyText: '请先选择下单平台', options: this.orderFormOption },
        { keyword: 'settleStatus', name: '客户结算', type: 'select', options: settlementStatusOption },
        { keyword: 'costSettleStatus', name: '成本结算', type: 'select', options: costSettlementStatusOption },
        { keyword: 'costItem', name: '成本项', type: 'select', options: this.costItemOptions },
        { keyword: 'incomeType', name: '收入类型', type: 'select', options: this.incomeOptions },
        { keyword: 'needCategoryId', name: '品牌标签', type: 'cascaderSelect', options: this.needCategoryAry },
        { keyword: 'orderType', name: '订单类型', type: 'select', options: orderOption },
        { keyword: 'resourceType', name: '资源类型', type: 'select', options: resourceOption },
        { keyword: 'supplierType', name: '供应商类型', type: 'select', options: this.supplierType },
        { keyword: 'accountState', name: '核销状态', type: 'mulSelect', options: verificationOptions },
        { keyword: 'reviewStateFilter', name: '审批状态', type: 'select', options: reviewStateOption },
        { keyword: 'departmentId',
          name: '所属部门', type: 'cascaderSelectWithChild', childrenVal: 'children', options: this.deptTreeList
        },
        { keyword: 'cooperationDepartment', name: '协作部门', type: 'cascaderSelectWithChild', childrenVal: 'children', options: this.deptTreeList },
        { keyword: 'resourceAttributionMatrixId', name: '所属经营体', type: 'cascaderSelectWithChild', childrenVal: 'children', options: this.deptTreeList },
        {
          keyword: 'operateMode', name: '运营模式', valueName: 'value', labelName: 'label', multiple: true, collapseTags: true,
          childrenVal: 'children', type: 'cascaderSelect', checkStrictly: false, options: this.operateModeList
        }, // v2.9.2
        { keyword: 'isMyPending', name: '待我处理', type: 'select', options: [
          { value: true, label: '是' }
        ] },
        { keyword: 'relatedInvoice', name: '发票关联状态', type: 'select', options: [{ value: 0, label: '待关联' }, { value: 1, label: '已关联' }] },
        { keyword: 'hasScreenshots', name: '是否有截图', type: 'select', options: [
          { value: true, label: '是' }, { value: false, label: '否' }
        ] },
        { keyword: 'hasData', name: '是否有数据', type: 'select', options: [
          { value: true, label: '是' }, { value: false, label: '否' }
        ] },
        { keyword: 'tag', name: '标签', valueName: 'id', labelName: 'name',
          childrenVal: 'item', type: 'cascaderSelect', checkStrictly: false, options: this.tagTreeList,
          multiple: true, filterable: true, collapseTags: true
        },
        // settleStatus  0：待结算，1：已结算，2：结算中
        { keyword: 'orderTime', labelWidth: '96px', name: '下单日期', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'arrivalTime', labelWidth: '96px', name: '到账日期', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'createTime', labelWidth: '96px', name: '创建时间', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'orderSealMonth', labelWidth: '96px', name: '订单封账月份', timeType: 'monthrange', type: 'rangeDate', format: 'yyyy/MM', startPlaceholder: '开始时间', endPlaceholder: '结束时间' }
      ];
      return arr;
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.fetchOrderData(true);
    this.getData();
    this.getOptionData();
  },
  methods: {
    format,
    hasRouteAuth,
    getOptionData() {
      this.queryTagTreeList();
      this.queryDeptTreeList();
      this.incomeTypeList();
      this.platformList();
      this.getOrderForm();
      this.costItemList();
      this.getOperate();
      this.needCategoryList();
    },
    getStatistics(params) {
      customerBillDetailStatistics(params).then(res => {
        if (res.code === 200) {
          this.statistics = res.data;
        }
      }).catch(err => console.error(err.message));
    },
    sortMethod(a) {
      if (!a.order) {
        this.sortName = '';
        this.sortType = '';
      } else {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.fetchOrderData();
    },
    getData() {
      this.pageLoading = true;
      customerBillDetail(this.id).then(res => {
        if (res.code === 200) {
          this.detailData = res.data;
          this.pageLoading = false;
        }
      }).catch(err => {
        if (err.code === 502) {
          this.pageLoading = false;
          this.$router.push({
            name: 'customerBill'
          });
        }
        console.error(err.message);
      });
    },
    handleSelectionChange(e) {
      this.selectOrderList = e;
      this.paramsObj.ids = e.map(item => {
        return item.id;
      }).join(',');
    },
    handleSizeChange(val) {
      this.list.perPage = val;
      this.fetchOrderData(true);
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchOrderData();
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    handleUpdate() {
      showModal('请确定是否更新').then(() => {
        updateCustomerBill(this.id).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功');
            this.fetchOrderData(true);
            this.getData();
          }
        });
      });
    },
    queryClick() {
      this.fetchOrderData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.$set(this.paramsObj, 'exactForClientName', 0);
      this.fetchOrderData(true);
    },
    handleExport(params) {
      this.exportBeforeExport(params);
    },
    exportBeforeExport(params) {
      if (this.$refs.btnGroupRef) {
        this.$refs.btnGroupRef.btnExport(params);
      }
    },
    openExportDialog() {
      const data = this.getParams();
      data.exportFrom = 2;
      this.$refs['exportBillRef'].initParams(data);
      this.exportBillVisible = true;
    },
    exportDialogClose() {
      this.$refs['exportBillRef'].dialogClose();
    },
    closeExportDialog() {
      this.exportBillVisible = false;
    },
    // 获取成本项列表
    async costItemList() {
      try {
        const params = { page: 1, perPage: 100, costBelong: 0 };
        const result = await costList(params);
        if (result.data) {
          result.data.items.forEach(i => {
            i.value = i.costId;
            i.label = i.costName;
          });
          this.costItemOptions = result.data.items;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取收入类型的列表
    async incomeTypeList() {
      try {
        const result = await getIncomeType();
        if (result.data) {
          result.data.forEach(i => {
            i.value = i.id;
            i.label = i.name;
          });
          this.incomeOptions = result.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    // 下单平台
    async platformList() {
      try {
        const result = await platformList();
        result.data = result.data.map(item => {
          item = {
            value: item.id,
            label: item.value
          };
          return item;
        });
        result.data.unshift({ value: -2, label: '--' });
        this.orderPlatformOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取品牌标签
    needCategoryList() {
      getNeedCategoryList().then(res => {
        this.needCategoryAry = res.data;
      }).catch(err => {
        console.error(err);
      });
    },
    // 获取下单形式
    async getOrderForm() {
      const params = { orderPlatformId: this.paramsObj.orderPlatformId };
      paramsAryToStr(['orderPlatformId'], params);
      // const orderPlatformId = this.paramsObj.orderPlatformId;
      if (!params.orderPlatformId) {
        return;
      }
      try {
        const result = await orderFormList(params.orderPlatformId);
        if (result.data && result.data.length) {
          result.data.forEach(i => {
            i.label = i.value;
            i.value = i.id;
          });
        }
        this.orderFormOption = result.data;
        if (this.paramsObj.orderFormId) {
          const formId = this.orderFormOption.find(i => i.value === this.paramsObj.orderFormId);
          if (!formId) this.$set(this.paramsObj, 'orderFormId', '');
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取运营模式的列表
    getOperate() {
      getOperateoptions().then(res => {
        this.operateModeList = res.data;
      });
    },
    queryTagTreeList() {
      const params = { type: this.TAG_MODULES.CHANNEL };
      getTagAll(params).then(res => {
        this.tagTreeList = (res && res.data) || [];
        this.tagTreeList.forEach(item => {
          if (!item.item) item.disabled = true;
        });
      }).catch(e => {
        console.log(e);
      });
    },
    /**
     * 工具
     */
    /* 递归循环品牌标签获取id START */
    searchingLoop(needCategoryId, ary) {
      const itemAry = this.getItemAry(ary, needCategoryId);
      return this.setId(itemAry);
    },
    setId(ary) {
      const needCategoryIds = [];
      const loop = (list) => {
        for (const i in list) {
          needCategoryIds.push(list[i].id);
          if (list[i].item && list[i].item.length) {
            loop(list[i].item);
          }
        }
      };
      loop(ary);
      return needCategoryIds;
    },
    getItemAry(list, needCategoryId) {
      let ans = null;
      const callback = (listItem, id) => {
        for (let i = 0; i < listItem.length; i++) {
          if (listItem[i].id === id) {
            ans = listItem[i].item;
            return listItem[i].item;
          }
          if (listItem[i].item) {
            callback(listItem[i].item, id);
          }
        }
      };
      callback(list, needCategoryId);
      return ans;
    },
    getParams() {
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      // 时间处理
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(this.arrayKeyArr, params);
      if (params.accountBelong && typeof params.accountBelong !== 'string' && params.accountBelong.length > 0) {
        params.accountBelong = params.accountBelong.join(',');
      }
      if (params.needCategoryId) {
        const needCategoryIds = this.searchingLoop(params.needCategoryId, this.needCategoryAry);
        needCategoryIds.push(params.needCategoryId);
        params.needCategoryId = needCategoryIds.join(',');
      }

      params.page = this.page;
      params.perPage = this.list.perPage;
      return params;
    },
    fetchOrderData(reset = false, noLoading = false) {
      if (reset) this.page = 1;
      const params = this.getParams();
      delete params.ids;
      params.orderMode = 0;
      params.customerBillId = this.id;
      params.sortName = this.sortName || '';
      params.sortType = this.sortType || '';
      this.getStatistics(params);
      if (this.cancelToken) this.cancelToken.cancel('cancel');
      const source = axios.CancelToken.source();
      this.cancelToken = source;
      if (!noLoading) this.listLoading = true;
      getList(this.page, this.list.perPage, params, source.token).then(({ data }) => {
        data.items.map(item => { // 添加订单类型的icon,颜色
          const typeImg = this.orderTypeImg.find(currentValue => item.orderType === currentValue.type);
          if (item.orderInfo.orderKind && item.orderInfo.orderKind.length) item.orderInfo.orderKindName = item.orderInfo.orderKind.map(i => i.orderKindName).join('，');
          item = Object.assign(item, typeImg);
          return item;
        });
        this.list = data;
        this.list.isInit = false;
        this.listLoading = false;
      }).catch(e => {
        if (!e || e.message !== 'cancel') {
          this.listLoading = false;
        }
        console.log(e);
      });
    },
    toBack() {
      this.$router.push({
        name: 'customerBill'
      });
    },
    handelFilterInputChange({ value, item }) {
      if (item.keyword === 'orderPlatformId') {
        this.$set(this.paramsObj, 'orderFormId', '');
        this.getOrderForm();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-bill-detail-wrap {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding: 16px 24px 56px;
  min-height: calc(100vh - 64px);
  .customer-form {
    margin-bottom: 32px;
    &::v-deep {
      .el-form-item {
        margin-bottom: 0;
        .el-form-item__label {
          color: #999999;
        }
      }
      .el-col-8 {
        border-right: 1px solid #ebeefd;
        &:nth-child(3n) {
          border-right: none;
        }
      }
    }
  }
  .table-list {
    margin-top: 16px;
  }
  .pagination-flex {
    justify-content: space-between;
  }
  .tool-row {
    position: relative;
    .opeator-bar {
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      align-items: center;
    }
  }
}
.mobile-detail-wrap {
  padding: 16px 12px 56px;
}
</style>
